fix: align translucent page and back button transitions with iOS 27 - #142
Conversation
Playwright test results
Details
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| if (enteringEl.querySelector(':scope > ion-header.header-translucent')) { | ||
| enteringContentAnimation.addElement(enteringEl); | ||
| } else if (!contentEl && enteringToolBarEls.length === 0 && headerEls.length === 0) { |
There was a problem hiding this comment.
🟡 オプトアウトした半透明ヘッダーにも独自トランジションが適用される
.ios26-disabled 付きの半透明ヘッダーでも、ページ全体の移動とツールバー処理の省略が有効になります。標準 Ionic スタイルを維持するオプトアウト契約に反し、遷移表示が変わります。
Learn more
このテーマでは .ios26-disabled が、個別 Ionic コンポーネントを標準 Ionic スタイルへ戻すための公開オプトアウトです。オプトアウト仕様 と半透明用 SCSS は、無効化されたヘッダーを対象外にしています。しかし新しい TypeScript の各 header-translucent 判定はクラスを無視するため、無効化されたヘッダーでもページ全体をアニメーション対象にし、標準のコンテンツ、ツールバー、transition-effect の処理を迂回します。同じ条件は entering、leaving、影、固定バックボタンの各処理に繰り返されています。
Example: <ion-header class="ios26-disabled" translucent> を持つページへ進むと、従来の標準ツールバー遷移ではなく、ページ全体が一体でスライドします。
Recommended fix: 半透明ヘッダーを検出する全条件を、SCSS と同様に ion-header.header-translucent:not(.ios26-disabled) に統一してください。固定バックボタン処理でも、無効化されたヘッダーおよびバックボタンを除外してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
| clone.icon = button.icon; | ||
| clone.text = button.text; |
There was a problem hiding this comment.
🟡 固定バックボタンの複製が元の外観を引き継がない
独自の color や mode を持つバックボタンでも、複製にはアイコンと文字しか反映されません。遷移中だけ既定値または以前の値で描画され、外観が切り替わります。
Learn more
実ボタンは遷移中に非表示となり、共有の ion-back-button.ion-cloned-element が代わりに表示されます。この共有要素は以前の利用時のプロパティを保持し得ます。既存の バックボタン複製処理 は text、mode、icon、color、disabled をすべて同期していますが、新処理は二つしか同期しません。
Example: color="danger" のバックボタンへ進むと、実ボタンが隠れている間だけ複製が既定色になります。直前に別の複製処理が走っていれば、そのボタンの色が残る場合もあります。
Recommended fix: 表示前に、既存処理と同じく mode、color、disabled も元のバックボタンから複製してください。
| clone.icon = button.icon; | |
| clone.text = button.text; | |
| clone.icon = button.icon; | |
| clone.text = button.text; | |
| clone.mode = button.mode; | |
| clone.color = button.color; | |
| clone.disabled = button.disabled; |
Was this helpful? React with 👍 or 👎 to provide feedback.
| const button = page.querySelector<HTMLIonBackButtonElement>(':scope > ion-header.header-translucent ion-back-button'); | ||
| if (!button || button.offsetWidth === 0) { | ||
| return; | ||
| } | ||
|
|
||
| const otherButton = otherPage?.querySelector<HTMLIonBackButtonElement>(':scope > ion-header.header-translucent ion-back-button'); | ||
| const persistent = !!otherButton && otherButton.offsetWidth > 0; |
There was a problem hiding this comment.
🔍 複数バックボタンの選択規則が従来処理と異なる
新処理は半透明ヘッダー内で最初の表示中ボタンを固定します。開始スロットやアクティブヘッダーを選別しないため、複数ツールバー構成で対象が変わり得ます。
Was this helpful? React with 👍 or 👎 to provide feedback.
| const rect = button.getBoundingClientRect(); | ||
| const width = button.offsetWidth; | ||
| const height = button.offsetHeight; |
There was a problem hiding this comment.
🔍 固定配置は事前計測した座標を使い続ける
複製位置はアニメーション構築時に一度だけ計測されます。開始前にビューポートが変化する環境を対応対象とするなら、位置ずれを確認してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios26/pr-142/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
/update-screenshots |
|
✅ Screenshots have been updated successfully! The new screenshots have been committed to this PR. |
1 participant
Translucent page transitions left a header band behind, restored blur abruptly after returning to a scrolled page, and moved the back button with the page. This change moves the translucent page as a unit, preserves header blur, and replaces the content-only dimming effect with a subtle page shadow.
Use Ionic's existing transition back-button clone to keep the button stationary without reparenting the real button. Apply converging appearance and expanding disappearance with icon-only blur; keep the button unchanged when both pages have one. Remove the large-title-to-back-button transition call. Restore temporary visibility, clone placement/styles, and page shadow after completion or gesture cancellation.
Validation:
git diff --checkpassed after rebasing onto main.The button demo includes a Push action to navigate to the action-sheet page and exercise transitions where both pages have a back button. The demo production build also passed.